import React from 'react'
import { Card, Icon, Typography, Row, Col, Avatar } from 'antd'
import { withI18n, Trans } from '@lingui/react'
import CountUp from 'react-countup'

const { Title, Text } = Typography
const { Meta } = Card

const DeviceInfo = ({ item, isMobile }) => {
  const { device, project, online } = item
  return (
    <Row gutter={24} style={{ marginTop: '10px' }}>
      <Col span={8} style={{ position: 'relative' }}>
        <Meta
          style={{
            maxWidth: '120px',
            margin: 'auto',
          }}
          avatar={
            !isMobile && (
              <Icon
                style={{ fontSize: '40px', color: '#3E4C72' }}
                type="deployment-unit"
              />
            )
          }
          title={
            <span>
              <Text>
                <Trans>{`Devices`}</Trans>
              </Text>
              <br />
              <CountUp
                style={{ fontSize: '20px', color: '#3E4C72' }}
                start={0}
                end={device}
                duration={2.75}
                useEasing
                useGrouping
                separator=","
              />
            </span>
          }
        />
      </Col>
      <Col span={8} style={{ position: 'relative' }}>
        <Meta
          style={{
            maxWidth: '120px',
            margin: 'auto',
          }}
          avatar={
            !isMobile && (
              <Icon
                style={{ fontSize: '40px', color: '#3E4C72' }}
                type="alert"
              />
            )
          }
          title={
            <span>
              <Text>
                <Trans>{`Devices Online`}</Trans>
              </Text>
              <br />
              <CountUp
                style={{ fontSize: '20px', color: '#3E4C72' }}
                start={0}
                end={online}
                duration={2.75}
                useEasing
                useGrouping
                separator=","
              />
            </span>
          }
        />
      </Col>
      <Col span={8} style={{ position: 'relative' }}>
        <Meta
          style={{
            maxWidth: '120px',
            margin: 'auto',
          }}
          avatar={
            !isMobile && (
              <Icon
                style={{ fontSize: '40px', color: '#3E4C72' }}
                type="folder-open"
              />
            )
          }
          title={
            <span>
              <Text>
                <Trans>{`Projects`}</Trans>
              </Text>
              <br />
              <CountUp
                style={{ fontSize: '20px', color: '#3E4C72', marginTop: '0px' }}
                start={0}
                end={project}
                duration={2.75}
                useEasing
                useGrouping
                separator=","
              />
            </span>
          }
        />
      </Col>
    </Row>
  )
}

export default DeviceInfo
